<template>
<el-container style="height: 100%;">
  <!-- Aside -->
  <el-aside width="200">
    <h1 class="logo"></h1>
        <el-menu class="el-qf-menu" :collapse="isCollapse" :default-active="$route.path">
          <qf-sub-menu :sideMenu='userRoutes'></qf-sub-menu>
        </el-menu>

  </el-aside>
  <el-container>
    <!-- Header -->
    <el-header>
        <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <div class="grid-content left">
            <i @click="isCollapse=!isCollapse" :class="['iconfont', isCollapse?'icon-zhankaicebianlan':'icon-shouqicebianlan']"></i>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content center">
              CRM系统
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content right">
              <el-avatar :size="40" :src="avatarUrl"></el-avatar>
              <b>欢迎您：<span>{{userInfo.nickname}}---</span></b>
              <b class="xdw" @click="quit">退出</b>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <!-- Main -->
    <el-main>
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{name:bread.name}" v-for="bread in breadCrumb" :key="bread.name">{{bread.meta.name}}</el-breadcrumb-item>
      </el-breadcrumb>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>
<script>
  import * as api from "../../api"
  import {mapState} from "vuex"
  export default {
    computed: {
      ...mapState(['userInfo',"userRoutes","breadCrumb"]),
      avatarUrl() { //如果用户没有头像，就使用默认头像，如果有就使用用户头像
          return this.userInfo.headimgurl?this.userInfo.headimgurl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      }
    },
    mounted() {
      this.$store.dispatch("GET_MENULIST");
    },
    data() {
      return {
        isCollapse: false
      }
    },
    methods: {
      quit() {
        // 清除token
        localStorage.removeItem('xdw-token')
        localStorage.removeItem("xdw-userInfo")
        // 跳转登录页
        this.$router.push("/login")
        // 3.刷新页面
        location.reload()
      }
    }
  }
</script>

<style scoped>
   *{
  margin: 0;
  padding: 0;
}
.xdw {
  cursor: pointer;
}
.el-header{
  background-image: linear-gradient(to left top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
  color: #fff;
  font-weight: bolder;
  text-align: center;
  /* line-height: 60px; */
}

.el-aside /deep/ .el-qf-menu:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

.el-breadcrumb {
  line-height: 80px;
  font-size: 20px;
  color: #5ffbf1;
}

.el-header .left {
  text-align: left;
}

.el-header .center {
  font-size: 30px;
  
}

.el-header .left>i {
  font-size: 40px;
}

.el-aside {
  background-image: linear-gradient(to left top, #fff, #5ffbf1);
  color: #333;
  text-align: center;
  /* line-height: 200px; */
}

.el-aside .logo {
  min-height: 60px;
}

.el-aside .subMenu {
  text-align: left;
}

.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}

 .el-container {
  margin-bottom: 40px;
  height: 100%;
}


.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-col {
  margin: 0 10px;
}
#___elevar__extension-root-element {
  height: auto !important;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}

.el-avatar {
  vertical-align: middle;
  margin: 0 10px;
}
</style>